<template>
	<view class="bank-page" :style="{
		padding: `${top + 60}px 32px`
	}">
		<image src="https://imgs.ddeke.com/2025/01/13/d2G0NbU84g.png" class="bank-icon" mode="widthFix" :style="{
			top: `${top}px`
		}"></image>
		<image src="https://imgs.ddeke.com/2025/01/13/2zTVH9cE9b.png" style="width: 100px;height: auto;"
			mode="widthFix"></image>
		<view class="bank-desc">百份文件、视频可供参阅</view>
		<view class="area-box">
			<block v-for="info in typeList" :key="info.id">
				<BankItem :info="info"></BankItem>
			</block>
		</view>
	</view>
</template>

<script setup>
	import BankItem from '@/components/BankItem.vue';
	import BankApi from '@/api/bank.js'
	import {
		ref
	} from 'vue';
	const top = uni.getMenuButtonBoundingClientRect().top
	const typeList = ref([])

	const getBankTypeList = async () => {
		const resp = await BankApi.typeList()
		typeList.value = resp.data
	}
	getBankTypeList()
</script>

<style lang="scss">
	page {
		background-color: #FDFDFF !important;
		background-image: url(https://imgs.ddeke.com/2025/01/13/jf0ZFzG3sf.jpg);
		background-size: 100vw auto;
		background-repeat: no-repeat;
	}

	.bank-page {
		position: relative;

		.bank-icon {
			position: absolute;
			width: 180px;
			height: 180px;
			right: 20px;
			z-index: 1;
		}

		.bank-desc {
			font-size: 14px;
			color: #86909C;
			margin-top: 16px;
		}

		.area-box {
			margin-top: 60px;
		}
	}
</style>